<template>
  <div class="app">
    <h1 class="title">App组件</h1>
    <hr />
    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <button @click="person.age += 1">修改年龄</button>
    <hr />
    <h1>汽车car1：{{ car }}</h1>
    <h1>汽车car2：{{ car2 }}</h1>
    <button @click="car2.price += 1">修改car2</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { markRaw, reactive, toRaw } from 'vue'

/* toRaw */
let person = reactive({
  name: '张珊珊',
  age: 18,
})

// 使用toRaw可以将响应式数据变成原始数据
let person2 = toRaw(person)
console.log('响应式数据：', person)
console.log('原始数据：', person2)

/* markRaw */
// 使用markRaw修饰之后，该对象永远不可变成响应式数据
let car = markRaw({
  brand: '奔驰',
  color: '黄色',
  price: 20,
})
let car2 = reactive(car)
console.log(car)
console.log(car2)
</script>

<style>
.app {
  background: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
}
</style>
